<template>
  <div>
    <PageTemplate>
      <div slot="content">
        <PageEditCollapse :is-search="false" :default-collapse="true">
          <div slot="title" class="page-edit-colllapse-title">
            <div style="width: 200px;">{{$t('cm.baseinfo')}}</div>
          </div>
          <div>
            <el-form
              :model="meeting"
              label-position="right"
              label-width="150px"
              class="page-edit-colllapse-form"
            >
              <el-row>
                <el-col :span="8">
                  <el-form-item :label="$t('she.meeting_trial')">
                    <el-input v-model="meeting.trial"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="$t('she.meeting_trial')">
                    <el-input v-model="meeting.trialRegion"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="$t('she.meeting_system_code')">
                    <el-input v-model="meeting.systemCode"></el-input>
                  </el-form-item>
                </el-col>

              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item :label="$t('she.meeting_teamName')" prop="teamName">
                    <el-input v-model="meeting.teamName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="$t('she.meeting_meetingStartTime')" prop="meetingStartTime">
                    <el-date-picker v-model="meeting.meetingStartTime" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="$t('she.meeting_meetingEndTime')" prop="meetingEndTime">
                    <el-date-picker v-model="meeting.meetingEndTime" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item :label="$t('she.meeting_realStartTime')" prop="meetingStartTime">
                    <el-date-picker v-model="meeting.realStartTime" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item :label="$t('she.meeting_realEndTime')" prop="meetingStartTime">
                    <el-date-picker v-model="meeting.realEndTime" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </PageEditCollapse>
        <PageEditCollapse :is-search="false" :default-collapse="true">
          <div slot="title" class="page-edit-colllapse-title">
            <div style="width: 200px;">{{$t('she.she_collapse_title_user')}}</div>
          </div>
          <div>
            <el-form
              :model="meeting"
              label-position="right"
              label-width="150px"
              class="page-edit-colllapse-form"
            >
              <el-row>
              <el-col :span="8">
                <el-form-item :label="$t('she.meeting_leadingUserName')" prop="leadingUserName">
                  <el-input v-model="meeting.leadingUserName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('she.meeting_teamSafetyUserName')" prop="teamSafetyUserName">
                  <el-input v-model="meeting.teamSafetyUserName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('she.meeting_meetingUserName')" >
                  <el-input v-model="meeting.meetingUser">
                      <el-button slot="append" icon="el-icon-search" @click="selectMeetingUser"></el-button>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            </el-form>
          </div>
        </PageEditCollapse>
        <PageEditCollapse :is-search="false" :default-collapse="true">
          <div slot="title" class="page-edit-colllapse-title">
            <div style="width: 200px;">{{$t('she.she_collapse_title_sign')}}</div>
          </div>
          <div>
            <el-table
              class="table"
              border
              ref="multipleTable"
              :data="meeting.hseMeetingUserShowList"
              tooltip-effect="dark"
              style="width: 100%"
              :header-cell-style="{background:tableHeaderBGC}"
            >
              <el-table-column type="index" :label="$t('cm.no')" align="center" width="60"></el-table-column>
              <el-table-column prop="meetingUserName" :label="$t('she.meeting_sign_meetingUserName')" align="center"></el-table-column>
              <el-table-column prop="meetingSignIn" :label="$t('she.meeting_sign_meetingSignIn')" align="center" :formatter="formatTableText"></el-table-column>
              <el-table-column prop="meetingSignInTime" :label="$t('she.meeting_sign_meetingSignInTime')" align="center" :formatter="formatTableText"></el-table-column>
            </el-table>
          </div>
        </PageEditCollapse>
        <PageEditCollapse :is-search="false" :default-collapse="true">
          <div slot="title" class="page-edit-colllapse-title">
            <div style="width: 200px;">{{$t('she.she_collapse_title_config')}}</div>
          </div>
          <div>
            <el-table
              class="table"
              border
              ref="multipleTable"
              :data="hseCheckOptionsConfigTreeList"
              tooltip-effect="dark"
              style="width: 100%"
              :header-cell-style="{background:tableHeaderBGC}"
              :span-method="objectSpanMethod"
              :cell-class-name="tableRowClassName"
              @cell-mouse-leave="cellMouseLeave"
              @cell-mouse-enter="cellMouseEnter"
            >
              <el-table-column type="index" :label="$t('cm.no')" align="center" width="60"></el-table-column>
               <!-- <el-table-column prop="sequence" label="序号" align="center" width="60"></el-table-column> -->
              <el-table-column prop="optionText1" :label="$t('she.meeting_config_project')" align="center"></el-table-column>
              <el-table-column prop="optionText2" :label="$t('she.meeting_config_content')" align="center"></el-table-column>
              <el-table-column prop="optionValue" :label="$t('she.meeting_config_result')" align="center">
                <template slot-scope="scope">
                  <el-select
                    v-if="scope.row.needInspection === MEETING_OPTION_1"
                    v-model="scope.row.optionValue"
                    multiple
                    collapse-tags
                    @change="(v) => {triggerOptionValue = true}"
                    @visible-change="(v) => {!v && triggerOptionValue ? handelOptionValueChange(scope.row.id2, scope.row) : ''}"
                    class="select-input-mystyle"
                  >
                    <el-option
                      v-for="item in scope.row.children"
                      :key="item.id"
                      :label="item.optionText"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                  <el-input v-if="scope.row.needInspection === MEETING_OPTION_2" v-model="scope.row.optionValue2" @blur="handelOptionValueChange(scope.row.children[0].id, scope.row)" class="select-input-mystyle"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="inspectionUserName" :label="$t('she.meeting_config_inspector')" align="center"></el-table-column>
              <el-table-column prop="inspectionTime" :label="$t('she.meeting_config_time')" align="center"></el-table-column>
            </el-table>
          </div>
        </PageEditCollapse>
        <PageEditCollapse :is-search="false" :default-collapse="true">
          <div slot="title" class="page-edit-colllapse-title">
            <div style="width: 200px;">文档及其他</div>
          </div>
          <div>
            文档文件 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <el-link v-for="(item, index) in meeting.hseMeetingFileList" :key="index"  @click.native.prevent="download(item)">
              {{item.fileName}}<span v-show="index !== meeting.hseMeetingFileList.length - 1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            </el-link>
          </div>
        </PageEditCollapse>
        <el-row class="row-empty-10"></el-row>
        <el-row>
          <!-- <el-button type="primary" @click="submitForm('meeting')">{{$t('cm.commit')}}</el-button> -->
          <el-button type="primary" @click="toList">{{$t('cm.return')}}</el-button>
        </el-row>
      </div>
    </PageTemplate>
  </div>
</template>

<script>
import { ALERT } from '@/utils/responseHandle'
import * as Constant from '@/utils/constant'
import PageTemplate from '@/components/common/PageTemplate'
import PageEditCollapse from '@/components/common/PageEditCollapse'
import { mapState } from 'vuex'
import { COMMON } from '@/utils/commonUtil'
import { dateFtt } from '@/utils/datetime'
import api_she from '@/api/api_she'
export default {
  components: {
    PageTemplate, PageEditCollapse
  },
  data () {
    return {
      meeting: {
        id: null,
        trial: null,
        trialRegion: null,
        systemCode: null,
        teamName: null,
        meetingStartTime: null,
        meetingEndTime: null,
        leadingUser: 11,
        leadingUserName: null,
        teamSafetyUser: 11,
        teamSafetyUserName: null,
        smsNotice: null,
        hseMeetingUserShowList: [],
        hseMeetingFileList: []
      },
      hseCheckOptionsConfigTreeList: [],
      meetingUsers:{participantId:null, participantName:null},
      MEETING_OPTION_1: Constant.MEETING_OPTION_1.value,
      MEETING_OPTION_2: Constant.MEETING_OPTION_2.value,
      triggerOptionValue: false,
      // 合并代码
      spanArr: [],
      position: 0,
      OrderIndexArr: [],
      rowIndex: '-1',
      hoverOrderArr: []
    }
  },
  created () {
    if (this.$router.history.current.params.id !== Constant.NEW_PARAMS) {
      this.sheMeetingGet(this.$router.history.current.params.id)
    }
  },
  methods: {
    sheMeetingGet (id) {
      api_she.sheMeetingGet({ id }, result => {
        if (result.code === Constant.RT_SUCCESS) {
          this.meeting = result.data
          this.handleOptionsConfigTreeList(result.data.hseCheckOptionsConfigTreeList)
        } else {
          // _this.$t('cm.tips')
          ALERT.error(result.msg)
        }
      })
    },
    handleOptionsConfigTreeList (optionsConfigTreeList) {
      let res = []
      optionsConfigTreeList.forEach((itemLevel1, index) => {
        itemLevel1.children.forEach((itemLevel2) => {
          let obj = {
            // 项目
            id: itemLevel1.id,
            meetingInfoId: itemLevel1.meetingInfoId,
            optionText1: itemLevel1.optionText,
            // 检查内容
            parentId: itemLevel2.parentId,
            optionText2: itemLevel2.optionText,
            // option
            optionValue: [],
            optionValue2: null,
            children: itemLevel2.children,
            // 检查人
            inspectionUserName: itemLevel2.inspectionUserName,
            // 检查时间
            inspectionTime: itemLevel2.inspectionTime
          }
          res.push(obj)
          if (obj.children && obj.children.length > 0) {
            obj.needInspection = obj.children[0].needInspection
            itemLevel2.children.forEach((itemLevel3) => {
              if (itemLevel3.isInspection === Constant.MEETING_OPTION_INSPECTION_Y && itemLevel3.needInspection === this.MEETING_OPTION_1) {
                // obj.optionValue = itemLevel3.id
                obj.optionValue.push(itemLevel3.id)
              }
              if (itemLevel3.isInspection === Constant.MEETING_OPTION_INSPECTION_Y && itemLevel3.needInspection === this.MEETING_OPTION_2) {
                obj.optionValue2 = obj.children[0].optionText
              }
            })
          }
        })
      })
      this.rowspan(res)
    },
    handelOptionValueChange (v, row) {
      let submitData = []
      if (row.optionValue && row.optionValue instanceof Array) {
        if (row.optionValue.length > 0) {
          for (let i = 0; i < row.optionValue.length; i++) {
            submitData.push({
              meetingInfoId: row.meetingInfoId,
              id: row.optionValue[i],
              optionText: row.optionValue[i],
              needInspection: row.needInspection
            })
          }
        } else {
          submitData = [{
            meetingInfoId: row.meetingInfoId,
            id: v,
            optionText: '',
            needInspection: row.needInspection
          }] // 不支持选择为空
        }
        this.triggerOptionValue = false
      } else {
        submitData.push({
          meetingInfoId: row.meetingInfoId,
          id: v,
          optionText: row.optionValue2,
          needInspection: row.needInspection
        })
      }
      api_she.sheCheckOptionsConfigInspection(submitData, result => {
        if (result.code === Constant.RT_SUCCESS) {
          ALERT.success(result.msg)
        } else {
          // _this.$t('cm.tips')
          ALERT.error(result.msg)
        }
      })
    },
    // 合并代码 ---start-----
    rowspan (tableData) {
      var spanArr = []
      var position = 0
      tableData.forEach((item, index) => {
        if (index === 0) {
          spanArr.push(1)
          position = 0
          item.sequence = index + 1
        } else {
          if (tableData[index].parentId === tableData[index - 1].parentId) {
            spanArr[position] += 1
            spanArr.push(0)
            tableData[index].sequence = tableData[index - 1].sequence
          } else {
            spanArr.push(1)
            position = index
            tableData[index].sequence = tableData[index - 1].sequence + 1
          }
        }
      })
      this.getOrderNumber(tableData)
      this.spanArr = spanArr
      this.position = position
    },
    getOrderNumber (tableData) {
      let OrderObj = {}
      let OrderIndexArr = []
      tableData.forEach((element, index) => {
        element.rowIndex = index
        if (OrderObj[element.parentId]) {
          OrderObj[element.parentId].push(index)
        } else {
          OrderObj[element.parentId] = []
          OrderObj[element.parentId].push(index)
        }
      })
      for (let k in OrderObj) {
        if (OrderObj[k].length > 1) {
          OrderIndexArr.push(OrderObj[k])
        }
      }
      this.OrderIndexArr = OrderIndexArr
      this.hseCheckOptionsConfigTreeList = tableData
    },
    tableRowClassName ({row, rowIndex}) {
      let arr = this.hoverOrderArr
      for (let i = 0; i < arr.length; i++) {
        if (rowIndex === arr[i]) {
          return 'hovered-row'
        }
      }
    },
    cellMouseEnter (row, column, cell, event) {
      this.rowIndex = row.rowIndex
      this.hoverOrderArr = []
      this.OrderIndexArr.forEach(element => {
        if (element.indexOf(this.rowIndex) >= 0) {
          this.hoverOrderArr = element
        }
      })
    },
    cellMouseLeave (row, column, cell, event) {
      this.rowIndex = '-1'
      this.hoverOrderArr = []
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (column.property === 'optionText1') {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    // 合并代码 ---end-----
    toList () {
      COMMON.routerTo(Constant.ROUTE_SHE_MEETING.index, this.$router)
    },
    selectMeetingUser() {},
    formatTableText (row, column, cellValue, index) {
      var fmtValue = null
      if (column.property === 'meetingSignIn') {
        fmtValue = Constant.MEETING_SIGN_MAP[row.meetingSignIn]
      } else if (column.property === 'meetingSignInTime') {
        fmtValue = row.meetingSignInTime ? dateFtt(row.meetingSignInTime) : ''
      }
      return fmtValue !== null && fmtValue !== undefined ? fmtValue : cellValue
    },
    download (item) { // 下载文件
      COMMON.downloadLinkByUrl(item.fileCenterUrl, item.fileName)
    }
  },
  mounted () {
  },
  computed: {
    ...mapState({
      tableHeaderBGC: state => state.common.tableHeaderBGC
    })
  }
}
</script>

<style lang="scss">
  .select-input-mystyle{
    width: 100% !important;
    .el-input {
      width: 100% !important;
    }
    .el-input__inner{
      border: 0px solid #DCDFE6 !important;
    }
  }
  .el-table .hovered-row {
    background: #f5f7fa;
  }
</style>
